<!--找回密码-->
<template>
    <el-dialog title="账号安全" :visible="dialogFormVisible"  width="50%" @close="modecClose">
        <el-form :model="emailForm" ref="emailForm"  :rules="rules" class="demo-dynamic" v-if="stepsType === 1">
            <el-form-item prop="email" >
                <el-input  v-model="emailForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" :loading="loading" style="width: 100%;" @click="msgEmailReset('emailForm')">下一步</el-button>
            </el-form-item>
            <div class="contentMode" v-if="stepsType === 2">
                <p class="textPrompt">我们已向您的邮箱发送了一封密码找回邮件，<br/>
                    请您注意<span style="color: #15a732;">接收邮件</span></p>
                <p style="marginTop: 20px;fontSize: 14px; color: #c3c3c3;">
                    请注意查收邮件，并按照邮件中的提示操作，完成安全认证。没有收到 ?
                    <span style="color:#15a732;cursor: pointer;" @click="msgEmailReset('emailForm')">重新发送</span></p>
            </div>
        </el-form>

    </el-dialog>
</template>

<script>
import http from "../../components/axios/fetch";
import { sendResetPasswordMail } from "../../components/axios/url";
    export default {
        name: "BackPasswordMode",
        props:{
            dialogFormVisible: null
        },
        data(){
            return {
                emailForm: {
                    email: ''
                },
                stepsType:1,
                loading:false,
                rules: {
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    ],

                },
            }
        },
        methods:{
            // 发送邮箱
            msgEmailReset(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        try{
                            http.post(sendResetPasswordMail,{email:this.emailForm.email}).then(res => {
                                if(res.data && res.data.resultMess === "success") {
                                    this.stepsType = 2;
                                    this.loading = false;

                                }
                                else {
                                    this.$notify.error({
                                        title: '提示',
                                        message: res.data.resultMess,
                                    });
                                    this.loading = false;

                                }
                            })
                        } catch(error){
                            this.$notify.error({
                                title: '提示',
                                message: '网络错误',
                            });
                            this.loading = false;

                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },

            //关闭弹窗
            modecClose() {
                this.$emit('dialogFormVisibleClose');
            }
        }
    }
</script>

<style scoped>

</style>
